<template>
  <div class="container">
    <div class="answer-and-ask">
      <div class="main-title">
        <a class="common-a" :underline="false"><span class="xinli-answer">心理问答</span></a>
        <span class="sub-title">每个人的心事都能得到答案</span>
        <!-- <p style="margin-right:0;float:right;">&nbsp;</p> -->
        <p class="send-content" @click="questionAsk">
          <a class="common-a">
            <span class="el-icon-question" />
            <span class="margin-icon">发布提问</span>
          </a>
        </p>
      </div>
      <div class="main-content">
        <div class="left-content">
          <router-link :to="{name: 'QuestionList'}">
            <a target="_blank"><span class="more-content">更多</span></a>
          </router-link>
          <Question v-for="question in questionList" :key="question.question.id" :question="question" />
        </div>
        <div class="right-content">
          <span class="last">最近30天精华问答</span>
          <a target="_blank"><span class="more">更多</span></a>
          <ul>
            <li>
              <a target="_blank" class="common-a">
                <span class="title" title="我性格或者人格中有偏执，多疑或者妄想吗？">我性格或者人格中有偏执，多疑或者妄想吗？</span>
              </a>
              <span class="answer">43回答</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Question from '../question/question.vue'
import { getQuestionList } from '@/api/question'
export default {
  components: { Question },
  data() {
    return {
      questionList: []
    }
  },
  mounted() {
    this.getQuestionList()
  },
  methods: {
    questionAsk() {
      this.$router.push('/addQuestion')
    },
    getQuestionList() {
      getQuestionList({ pageIndex: 1, pageSize: 6 }).then(res => {
        this.questionList = res.data.list
      })
    }
  }
}
</script>

<style>
.answer-and-ask {
  height: 1050px;
  background: #f2f3f4;
  clear: both;
  padding: 50px 0 20px;
}
.answer-and-ask .main-content {
    clear: both;
    margin-top: 30px;
}
.answer-and-ask .main-content .left-content {
    height: 930px;
    width: 620px;
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    margin-right: 20px;
}
.answer-and-ask .main-content .left-content .more-content {
    float: right;
    margin: 30px 30px 8px 0;
    font-size: 14px;
    color: #666;
}
.common-a, .common-a:hover {
    text-decoration: none;
}
.answer-and-ask .main-title .xinli-answer {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #0b8bff;
    line-height: 28px;
    margin-right: 14px;
}
.answer-and-ask .main-title .sub-title {
    font-size: 16px;
    color: #999;
    line-height: 18px;
}
.answer-and-ask .main-title .send-content {
    float: right;
    margin-left: 560px;
    line-height: 25px;
    font-size: 14px;
    cursor: pointer;
}
.margin-icon {
    margin-left: 8px;
}
.answer-and-ask .main-content .right-content {
    height: 930px;
    width: 330px;
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    clear: both;
    vertical-align: top;
    overflow: hidden;
}
.answer-and-ask .main-content .right-content .last {
    display: inline-block;
    margin: 30px 0 0 24px;
    font-size: 18px;
    color: #333;
    line-height: 18px;
}
.answer-and-ask .main-content .right-content ul {
    clear: both;
    margin-top: 44px;
    list-style: none;
    padding: 0 24px;
}
.answer-and-ask .main-content .right-content ul li {
    margin-bottom: 17px;
}
.answer-and-ask .main-content .right-content ul .title {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666;
    line-height: 14px;
}
.answer-and-ask .main-content .right-content ul .answer {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #0b8bff;
    margin-top: 8px;
    line-height: 12px;
    padding: 0;
}
</style>
